import { reactive, nextTick } from 'vue'
import { useMusicStoreHook } from '@/store/modules/music'

const musicStore = useMusicStoreHook();

export type DomObject = {
  lyricContainer: HTMLElement | null,
  lyricContentUl: HTMLElement | null,
}

// 需要操作的dom对象
export const dom = reactive<DomObject>({
  lyricContainer: null,
  lyricContentUl: null,
})
// 解析完成之后的歌词数据
export const lyricData = ref<Array<any>>([])

/**
* 解析歌词字符串，得到一个歌词对象，每个歌词对象
* { time: 开始时间，words：歌词内容 }
* @param {String} lyric 未格式化的歌词字符串
*/
export function parseLrc(lyric: string) {
  // 歌词对象数组
  let result: any = [];
  if (!lyric) {
    lyricData.value = [];
    return lyricData.value.push({ offset: 0, words: "这首歌暂时没有歌词哦" })
  }
  let lines = lyric.split("\n");
  lines = lines.filter((item) => item);

  lines.forEach((item) => {
    let parts = item.split("]");
    let timeStr = parts[0].trim().slice(1);
    // 有些歌曲没有返回时间那一部分，所有直接返回歌词
    if (Number.isNaN(parseTime(timeStr))) {
      let obj = {
        time: undefined,
        words: parts[0],
      };
      return result.push(obj);
    }
    // 歌词对象数据
    let obj = {
      time: parseTime(timeStr),
      words: parts[1],
    };
    return result.push(obj);
  });
  if (result[0].time == undefined) {
    result.unshift({ offset: 0, words: "该首歌不支持歌词滚动" });
  }
  lyricData.value = result;
}

/**
 * 将一个时间字符串解析为数字（秒）
 * @param {String} timeStr 时间字符串
 */
export function parseTime(timeStr: string) {
  let parts = timeStr.split(':');
  // 字符串数字前面带上一个"+"可将其转化成数字
  return +parts[0] * 60 + +parts[1]
}

/**
 * 计算出当前播放器播放到第几秒的情况下
 * lrcData数组中应该高亮显示的歌词下标
 * 如果没有任何一句歌词需要显示，则得到-1
 */
export function findIndex(lrcData: Array<any>): number {
  // 获取当前播放进度
  let curTime = musicStore.audioInfo.currentTime
  for (let i = 0; i < lrcData.length; i++) {
    if((lrcData[i].words as string).includes('纯音乐') && lrcData.length == 1) {
      return 0;
    }
    // 如果当前播放的时间小于歌词数组里面某一项的时间，证明还未播放到lrcData
    // 里面某一项的歌词，当前应该是处于改歌词的上一句歌词
    if (curTime < lrcData[i].time) {
      return i - 1;
    }
  } 
  // 找遍了都没有找到，说明播放到最后一句了，返回最后一句的下标让其始终显示高亮
  return lrcData.length - 1;
}

/**
 * 创建歌词列表li
 */
export function createLyricLiElement() {
  // 返回的歌词不支持歌词滚动，只让第一行始终保持高亮
  if (lyricData.value[0]?.offset == 0) {
    nextTick(() => {
      // 去掉之前的active样式
      let li = dom.lyricContentUl!.querySelector(".lyric-active");
      if (li) {
        li.classList.remove("lyric-active");
      }
      dom.lyricContentUl!.style.transform = `translateY(0)`;
      let firstLi = dom.lyricContentUl!.children[0];
      if (firstLi) {
        firstLi.classList.add("lyric-active");
      }
    });
    return;
  }

  musicStore.audioInfo.audio.addEventListener("timeupdate", setOffset);
}

/**
* 设置歌词ul元素的偏移量
*/
export function setOffset() {
  // 包裹歌词ul的容器高度
  let containerHeight = dom.lyricContainer!.clientHeight; // 380

  // 每一行歌词的固定高度
  let lineHeight = dom.lyricContentUl!.children[0].clientHeight; // 40

  // 最大偏移量
  let maxOffset = dom.lyricContentUl!.clientHeight - containerHeight; // 1728
  // 获取当前歌词播放到lrcData歌词数组中的那个位置的下标
  let index = lyricData.value[0]?.offset == 0 ? 0 : findIndex(lyricData.value);

  const paddingTop = 70;
  // 获取该向上偏移多少数值
  let offset = lineHeight * index + lineHeight / 2 - containerHeight / 2 + paddingTop; // 70为容器的paddint-top值
  // console.log('offset==>', offset)
  if (offset < 0) {
    offset = 0;
  }
  if (offset > maxOffset + containerHeight / 2) {
    offset = maxOffset + containerHeight / 2;
  }
  dom.lyricContentUl!.style.transform = `translateY(-${offset}px)`;
  // 去掉之前的active样式
  let li = dom.lyricContentUl!.querySelector(".lyric-active");
  if (li) {
    li.classList.remove("lyric-active");
  }
  li = dom.lyricContentUl!.children[index];
  
  if (li) {
    li.classList.add("lyric-active");
  }
}